<template>
  <div id="priceChanges">
    <br /><br /><br />
    <h2>{{ cate + msg }}</h2>
    <br />
    <div>
      <button class="btn btn-primary" v-on:click="changeType('bar')">
        柱状图
      </button>
      <button class="btn btn-success" v-on:click="changeType('line')">
        折线图
      </button>
      <div
        id="priceChangesChart"
        class="chart"
        :style="{ width: '1200px', height: '500px' }"
      ></div>
      <h2>详细数据</h2>
      <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">marketDate</th>
              <th scope="col">cateName</th>
              <th scope="col">nowAvgPrice</th>
              <th scope="col">priceChange</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(data, index) in price" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ date[index] }}</td>
              <td>{{ cate }}</td>
              <td>{{ data }}</td>
              <td>{{ priceChanges[index] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "productsDataDisplay",
  data() {
    return {
      msg: "的近五日全国均价走向",
      chart: "",
      cate: "",
      price: [],
      date: [],
      priceChanges: [],
      option: {
        legend: {},
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: [],
          },
        ],
        yAxis: [{ gridIndex: 0 }],
        // grid: [{ bottom: "5%" }, { top: "35%" }],
        grid: {
          x: 20,
          y: 30,
          x2: 20,
          y2: 35,
        },
        series: [
          {
            name: "",
            type: "line",
            data: [],
            lineStyle: {
              normal: {
                color: "blue",
                width: 3,
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    getInfo(cateName) {
      this.axios
        .get(
          "http://localhost:8081/api-service/getByStartEnd?cateName=" + cateName
        )
        .then((body) => {
          var result = body.data;
          for (var i = 0; i < result.data.result.length; i++) {
            this.price.push(result.data.result[i].nowAvgPrice);
            this.date.push(result.data.result[i].marketDate);
            this.priceChanges.push(result.data.result[i].priceChange);
          }
          this.option.xAxis[0].data = this.date;
          this.option.series[0].data = this.price;
          this.option.series[0].name = cateName + "价格走向";
          this.chart.setOption(this.option);
        });
    },
    changeType(val) {
      this.option.series[0].type = val;
      this.chart.setOption(this.option);
    },
  },
  mounted() {
    this.cate = this.$route.query.cate;
    this.chart = this.echarts.init(document.getElementById("priceChangesChart"));
    this.getInfo(this.cate);
    this.chart.setOption(this.option);
  },
};
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/../../static/css/dashboard.css";
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.chart {
  margin: auto;
  position: relative;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
</style>